<template>
  <div class="meself-container">
    <div class="item">
      <div class="user-info">
        <img :src="user.avatar" alt="头像">
        <span>{{user.username}}</span>
      </div>

      <van-grid :column-num="3">
        <van-grid-item icon="clock-o" text="历史记录" />
        <van-grid-item icon="star-o" text="我的收藏" to='/collection' />
        <van-grid-item icon="like-o" text="我的点赞" to='/favorite' />
      </van-grid>

      <van-cell-group inset>
        <van-cell title="单元格" is-link />
        <van-cell title="单元格" is-link />
        <van-cell title="单元格" is-link />
        <van-cell title="退出登录" is-link @click="tuichu" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { deleteToken } from '../utils/token'
import { getUserInfo } from '../api/user'
export default {
  data() {
    return {
      user: {}
    }
  },
  async created() {
    const res = await getUserInfo()
    this.user = res.data.data
    console.log(this.user);
  },
  methods: {
    tuichu() {
      Dialog.confirm({
        title: '是否退出',
        message: '是否退出',
      })
        .then(() => {
          // on confirm
          console.log(1);
          deleteToken()
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
          console.log(2);
        });
    }
  }
}
</script>

<style scoped>
.meself-container {
  background-color: #f5f5f5;
  height: calc(100vh - 50px);
}

.item {
  margin: 0 16px 0 16px;
}

.user-info {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
}

.user-info img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 15px;
}

.van-cell-group--inset {
  margin: 0;
  margin-top: 30px;
}
</style>